<template>
	<div>
		<!-- 利润 -->
		<!-- 功能模块 -->
		<div class="box2">
			<ul class="list">
				<li @click="jump('goods_maintenance')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-zan"></use>
					</svg>
					<p>货品维护</p>
				</li>
				<li @click="jump('customer_management')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-yinliao"></use>
					</svg>
					<p>客户管理</p>
				</li>
				<li @click="jump('order_record')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-mianbao"></use>
					</svg>
					<p>订单记录</p>
				</li>
				<li @click="jump('sales_statistics')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-xiaoxi"></use>
					</svg>
					<p>销售统计</p>
				</li>

			</ul>
			<ul class="list">
				<li @click="jump('profit_statistics')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-duihua"></use>
					</svg>
					<p>利润统计</p>
				</li>
				<li @click="jump('purchase_services')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-bianqian"></use>
					</svg>
					<p>购买服务</p>
				</li>
				<li @click="jump('quotation_management')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-rili"></use>
					</svg>
					<p>报价管理</p>
				</li>
				<li @click="jump('supplier')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-gushi"></use>
					</svg>
					<p>供应商</p>
				</li>

			</ul>
			<ul class="list">
				<li @click="jump('employee_management')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-quanzi"></use>
					</svg>
					<p>员工管理</p>
				</li>
				<li @click="jump('follow_up_record')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-kaiguan"></use>
					</svg>
					<p>跟进记录</p>
				</li>
				<li @click="jump('capital_account')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-huaduo"></use>
					</svg>
					<p>资金账户</p>
				</li>
				<li @click="jump('home_page_configuration')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shezhi"></use>
					</svg>
					<p>首页配置</p>
				</li>
			</ul>

			<ul class="list">
				<li @click="jump('warehouse_management')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shangdian"></use>
					</svg>
					<p>仓库管理</p>
				</li>
				<li @click="jump('receipt_document')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shangdian1"></use>
					</svg>
					<p>入库单据</p>
				</li>
				<li @click="jump('delivery_document')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-Wifi"></use>
					</svg>
					<p>出库单据</p>
				</li>
				<li @click="jump('warehouse_allocation')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-Wifi1"></use>
					</svg>
					<p>仓库调拨</p>
				</li>
			</ul>

			<ul class="list">
				<li @click="jump('combinatorial_resolution')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-wenjian"></use>
					</svg>
					<p>组合/拆分</p>
				</li>
				<li>
				</li>
				<li>
				</li>
				<li>
				</li>
			</ul>
		</div>
		<!-- tab选项卡 -->

		<!-- 右边固定 -->
		<div class="box4">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-yun"></use>
			</svg>
		</div>
	</div>
</template>

<script>
	import bus from "../bus.js"
	export default {
		name: "homepage",
		//设置路由跳转
		data() {
			return {
				showlist: [],
				value1: "",
				value2: "",
				value3: "",
				value4: "",
				value5: ""
			}
		},
		methods: {
			jump(value) {
				this.$router.push({
					name: value
				}).catch(err => err)
			}
		},
		mounted() {
			bus.$on("showlist", (data) => {
				this.showlist = data
				for (var i=0;i<this.showlist.length;i++) {
				}
			})
      
		}

	}
</script>

<style scoped="scoped">
	.box4 {
		position: fixed;
		right: 0;
		bottom: 70px;
		background-color: lightblue;
		border-radius: 50%;
		padding: 5px;
	}

	.list {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: center;
	}

	.list li {
		width: 50%;
		text-align: center;
		line-height: 20px;
		margin: 10px;
	}

	.list li:nth-child(1) {
		border-right: 1px solid white;
	}

	p {
		margin: 0;
		padding: 0;
		font-size: 14px;
	}


	.icon {
		width: 1.5em;
		height: 1.5em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}
</style>
